<template>
  <div>
    <div class="title shadow">
      <i style="padding: 12px" @click="back" class="el-icon-arrow-left"></i>
      琪琪的书屋
    </div>
    <div class="list shadow" v-for="(book,index) in books" :key="index" @click="jumpTo(book)">
      <img class="image" src="../assets/book.png" alt="书籍">
      {{ book_names[book.typeId] }}
    </div>
  </div>

</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import UrlConfig from '../utils/api'

export default {
  name: 'BookIndex',
  data () {
    return {
      books: [],
      book_names: ['恰似寒光遇骄阳', '重生逆天小毒妃', '余生漫漫皆为你']
    }
  },
  methods: {
    jumpTo (book) {
      if (book.lastRead == null || book.lastRead === 0) {
        this.$router.push({
          path: '/p_book/list',
          query: {
            type: book.typeId
          }
        })
      } else {
        this.$router.push({
          path: '/p_book/content',
          query: {
            id: book.lastRead
          }
        })
      }
    },
    back () {
      this.$router.push({
        path: '/'
      })
    },
    notify_message (msg) {
      this.$message(msg)
    }
  },
  mounted: function () {
    const context = this
    this.$fetch(UrlConfig.book_type)
      .then(function (res) {
        context.books = res.data.data
      })
      .catch(function () {
        context.notify_message('加载数据失败')
      })
  }
}
</script>

<style scoped>
  .title {
    background: lightpink;
    margin: 0;
    color: white;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .list {
    width: auto;
    margin-right: 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: white;
    padding: 5px;
    color: black;
    height: 100px;
    margin-top: 10px;
  }

  .back-image {
    height: 40px;
  }

  .image {
    width: 90px;
    height: 90px;
  }

</style>
